<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>

    </title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/axios.min.js"></script>
    <style type="text/css">
        .content_wrapper {
            width: 1000px;
            margin: 20px auto;
        }

        .content_head,
        .content_data {
            text-align: center;
            padding-top: 50px;
            padding-left: 20px;
            padding-right: 20px;
        }

        .table_title {
            float: left;
            line-height: 26px;
            margin-left: 40px;
        }

        .search_div {
            float: right;
            /* margin-right: 40px; */
        }
    </style>
</head>

<body>
<div id="app">
    <div class="content_wrapper">
        <div class="content_head">

            <h1>全球冠状病毒实时数据统计</h1>
            <h3>数据更新日期{{responseData.year}}-{{responseData.month}}-{{responseData.day}}</h3>
            <!-- <h3>当前日期{{today}}</h3> -->
            <br>
            <table class="table table-striped">
                <tr>
                    <td>总确诊人数</td>
                    <td>死亡总人数</td>
                    <td>全球治愈总人数</td>
                    <td>全球现存病例人数</td>
                    <td>全球新增病例人数</td>
                </tr>
                <tr>
                    <td>{{responseData.confirmedTotalCount}}</td>
                    <td>{{responseData.deathsTotalCount}}</td>
                    <td>{{responseData.recoveredTotalCount}}</td>
                    <td>{{responseData.activeTotalCount}}</td>
                    <td>{{responseData.incrementCount}}</td>
                <tr>
			</table>

        </div>

        <div class="content_data">
            <table class="table table-hover">

                <caption>
                    <div class="table_title">表格数据,总数：{{originList.length}}条</div>
                    <div class="search_div">
                        <span>搜索 </span>
                        <input type="text" v-model="search">
                        <span v-if="isSearching">搜索结果：{{list.length}}条</span>
                    </div>
                </caption>
                <tr>
                    <td>国家</td>
                    <td>省/州</td>
                    <td>累计确诊</td>
                    <td>死亡</td>
                    <td>治愈</td>
                    <td>现存病例</td>
                </tr>
                <tr v-for="single in list">
                    <td>{{single.country}}</td>
                    <td>{{single.province}}</td>
                    <td>{{single.confirmed}}</td>
                    <td>{{single.deaths}}</td>
                    <td>{{single.recovered}}</td>
                    <td>{{single.active}}</td>
                </tr>
            </table>
        </div>
    </div>

</div>
</body>
<script type="text/javascript">
    Vue.config.devtools = true;
    new Vue({
        el: "#app",
        data: {
            search: "",
            today: "",
            isSearching: false,
            // list: [],
            responseData: {},
            originList: []
        },
        methods: {
            showTodayDate() {
                let today = new Date();
                let year = today.getFullYear;
                let month = today.getMonth;
                let day = today.getDate;
                this.today = year + month + day;
            }
          
        },
        mounted(){
            axios.get('/covid/all')
                .then(response => {
                    console.log(response);
                    this.responseData = response.data;
                    this.originList = this.responseData.regionDatas;
                })
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                })
        },

        computed: {
            "list": function () {
                let _search = this.search.toLowerCase();
                let reg = new RegExp(_search, "ig");
                if (_search) {
                    this.isSearching = true;
                    return this.originList.filter(function (item) {
                        if (item.country.match(reg) || item.province.match(reg)) {
                            return item;
                        }
                    });
                }
                this.isSearching = false;
                return this.originList;
            }
        },
        filters: {
            "dateFilter": function (date, pattern) {
                return date.format(pattern);
            }
        }

    });


</script>

</html>